<template>
  <div class="group_wrap">
    <DynamicForm :config="config2" :questions="questions2">
      <template #tableSlot="{ data }">
        <div class="table_slot">需要备件，<a href="#">填写申请</a></div>
      </template>
    </DynamicForm>
    <DynamicForm :config="config" :questions="questions" ref="dynamicForm1">
      <template #slotName="{ question }">
        <a-input-number v-model:value="question.value" :min="1" :max="100000" class="local_input_number" />
        <a-form-item-rest>
          <a-select v-model:value="question.state.extendParams.extendObj.value1" style="width: 120px; margin-left: 10px">
            <a-select-option value="1">周</a-select-option>
            <a-select-option value="2">月</a-select-option>
            <a-select-option value="3">年</a-select-option>
          </a-select>
        </a-form-item-rest>
      </template>
    </DynamicForm>
    <div class="group_conditions">需要备件 <span>申领备件</span></div>

    <a-table :columns="columns" :data-source="dataSource" bordered :pagination="false">
      <template #bodyCell="{ column, index, text, record }">
        <template v-if="column.dataIndex === 'operation'">
          <div class="editable-row-operations">
            <span>
              <a @click="deteleItem(index)">删除</a>
            </span>
          </div>
        </template>
        <div v-else>
          <a-input v-if="column.type === 'disable'" v-model:value="dataSource[index][column.dataIndex]" disabled placeholder="自动填充" />
          <a-input v-else v-model:value="dataSource[index][column.dataIndex]" />
        </div>
      </template>
    </a-table>

    <div class="group_add" @click="addItem()">添加设备</div>

    <DynamicTable :tables="tables4" :config="config4" :icons="icons4">
      <!-- 本地插槽 -->
      <template #name2="{ text, record, column }"> 子集插槽{{ text }} </template>
    </DynamicTable>
    <h4>审批记录</h4>
    <DynamicTable :tables="tables3" :config="config3" :icons="[]">
      <!-- 本地插槽 -->
      <template #slotName="{ text, record, column }">
        <div class="sdw_bg">插槽{{ timeFilter(text) }}</div>
      </template>
    </DynamicTable>

    <DynamicTable :tables="tables5" :config="config5" :icons="[]" class="table5">
      <!-- 本地插槽 -->
      <template #name1="{ text, record, column }"> 插槽{{ timeFilter(text) }} </template>
    </DynamicTable>

    <DynamicForm :config="config6" :questions="questions6" ref="dynamicForm6">
      <template #footerBtn="{ data }">
        <a-button class="dynamic_footer_btn">暂存</a-button>
      </template>
      <template #slotHint="{ data }"> 需要备件，填写申请 </template>
    </DynamicForm>

    <div class="group_btns">
      <a-button type="primary" @click="submit()">提交</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, computed, ref, getCurrentInstance, onMounted, onUnmounted } from 'vue';
import { ConfigBase, DynamicForm, DynamicTable, TableBase } from '@/components/public-template';
import homeService from './group.service';
import { formInfoStore } from '@/store/modules/form';
import { timeFilter } from '@/filters/index';
import { Subscription } from 'rxjs';
import { CUSTOMSELECTSERVE, SELECTSERVE, TIMESERVE } from '@/mixins/subject/subject-types';
import { filter } from 'rxjs/operators';
const formStore = formInfoStore();

let $subscribeSub: Subscription;
const { proxy }: any = getCurrentInstance();

let config2: any = {
  queryUrl: 'TokenAuth/Authenticate',
  addUrl: 'TokenAuth/Authenticate',
  layout: 'vertical',
  grid: 6, //分栏
  rowKey: 'key',
  labelCol: {
    //label 固定宽度
    style: { width: '240px' }
  }, //label的占比
  // cancelSave: true, //隐藏底部按钮
  combinationMethod(data: any) {
    return data;
  },
  beforeWithMethod(data: any) {
    return data;
  }
};

let config: any = {
  queryUrl: 'TokenAuth/Authenticate',
  addUrl: 'TokenAuth/Authenticate',
  labelCol: {
    //label 固定宽度
    style: { width: '120px' }
  },
  grid: 12, //分栏
  cancelSave: true, //隐藏底部按钮
  combinationMethod(data: any) {
    return data;
  },
  beforeWithMethod(data: any) {
    return data;
  },
  data: {
    select1: 1,
    startTime: '',
    select2: 2,
    slot: 5,
    select3: 1,
    startTime2: '',
    extendObj: {
      value1: '2'
    },
    customTable: []
  }
};

let config3: any = {
  style: 'table-form',
  layout: 'inline',
  queryUrl: 'Course/GetAll',
  rowKey: 'id',
  params: {},
  data: [
    {
      id: '111',
      name1: '课程1',
      name2: '张三',
      name3: 1,
      name4: 1663139464524,
      name5: 1663139464524,
      name6: 1663139464524,
      name7: 1,
      maintenanceStatus: '1',
      img: 'https://summit.awsevents.cn/2023/images/banner_bg.png'
    },
    {
      id: '222',
      name1: '课程1',
      name2: '张三',
      name3: 2,
      name4: 1663139464524,
      name5: 1663139464524,
      name6: 1663139464524,
      name7: 2,
      maintenanceStatus: '1',
      img: 'https://summit.awsevents.cn/2023/images/banner_bg.png'
    }
  ]
};

let icons4: TableBase<any>[] = reactive(homeService.getIcons());
let config4: any = {
  style: 'table-form',
  queryUrl: 'Course/GetAll',
  rowKey: 'id',
  mode: true,
  childrenKey: 'childrens',
  childrenColumns: [
    { title: '批次号', dataIndex: 'name1', type: 'slot', slotName: 'name1' },
    { title: '库存量', dataIndex: 'name2' },
    { title: '单价(元)', dataIndex: 'name3' }
  ],
  rowSelection: {
    //选择功能的配置
    type: 'checkbox' //多选/单选 ：checkbox/radio
  },
  params: {},

  data: [
    {
      id: 1,
      name1: '1',
      name2: '大族',
      name3: '运动部件类',
      name4: '齿轮',
      name5: 'CAAB41',
      name6: 'M-PAR-001',
      name7: 2,
      name8: '个',
      name9: 1,
      name10: 1663139464524,
      childrens: [
        {
          name1: '12345',
          name2: '122',
          name3: '11'
        },
        {
          name1: '12345',
          name2: '122',
          name3: '11'
        },
        {
          name1: '12345',
          name2: '122',
          name3: '11'
        }
      ]
    },
    {
      id: 2,
      name1: '2',
      name2: '大族',
      name3: '运动部件类',
      name4: '齿轮',
      name5: 'CAAB41',
      name6: 'M-PAR-001',
      name7: 2,
      name8: '个',
      name9: 1,
      name10: 1663139464524,
      childrens: [
        {
          name1: '12345',
          name2: '122',
          name3: '11'
        },
        {
          name1: '12345',
          name2: '122',
          name3: '11'
        },
        {
          name1: '12345',
          name2: '122',
          name3: '11'
        }
      ]
    }
  ]
};
const init4 = () => {
  // setTimeout(()=>{
  config4.defaultValue = [1, 2];
  // })
};
init4();

formStore.setQuestions(reactive(homeService.getQuestions()));
let questions: any = reactive(homeService.getQuestions());
let questions2: any = reactive(homeService.getQuestions2());
let tables3: TableBase<any>[] = reactive(homeService.getTables());
let tables4: TableBase<any>[] = reactive(homeService.getTables4());
let tables5: TableBase<any>[] = reactive(homeService.getTables5());
let config5: any = {
  style: 'table-form',
  layout: 'inline',
  queryUrl: 'Course/GetAll',
  rowKey: 'id',
  isShowHeader: false,
  params: {},
  data: [
    {
      name1: '1',
      name2: '大族',
      name3: '运动部件类',
      name4: '齿轮',
      name5: 'CAAB41',
      name6: 'M-PAR-001',
      name7: 2,
      name8: '个',
      name9: 1,
      name10: 1663139464524
    },
    {
      name1: '2',
      name2: '大族',
      name3: '运动部件类',
      name4: '齿轮',
      name5: 'CAAB41',
      name6: 'M-PAR-001',
      name7: 2,
      name8: '个',
      name9: 1,
      name10: 1663139464524
    }
  ]
};

let dataSource: any = reactive([
  {
    name1: '',
    name2: '',
    name3: '',
    name4: '',
    name5: '',
    name6: ''
  }
]);
const columns = [
  {
    title: '行号',
    dataIndex: 'name1'
  },
  {
    title: '品牌',
    dataIndex: 'name2'
  },
  {
    title: '类型',
    dataIndex: 'name3'
  },
  {
    title: '备件名称',
    dataIndex: 'name4'
  },
  {
    title: '备件编码',
    dataIndex: 'name5',
    type: 'disable'
  },
  {
    title: '规格型号',
    dataIndex: 'name6',
    type: 'disable'
  },
  {
    title: '申领数量',
    dataIndex: 'name7'
  },
  {
    title: '单位',
    dataIndex: 'name8',
    type: 'disable'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    width: '100px'
  }
];

const config6: any = {
  grid: 12,
  btnPosition: 'center',
  // cancelSave: false,
  labelCol: {
    //label 固定宽度
    style: { width: '120px' }
  }, //label的占比
  combinationMethod(data) {
    return data;
  },
  data: {
    name1: 1,
    name2: 2,
    name3: 3,
    name4: '',
    customTable: [
      {
        name2: 'jack',
        name3: '112',
        name4: '223',
        name5: '445',
        name6: 'qq',
        name7: '15112222222',
        name8: '个',
        id: '1'
      },
      {
        name2: 'jack',
        name3: '112',
        name4: '223',
        name5: '445',
        name6: 'qq',
        name7: '15112222222',
        name8: '个',
        id: '2'
      }
    ],
    customTable2: [
      {
        name2: 'jack',
        name3: '112',
        name4: '223',
        name5: '445',
        name6: 'qq',
        name7: '15112222222',
        name8: '个',
        id: '3'
      },
      {
        name2: 'jack',
        name3: '112',
        name4: '223',
        name5: '445',
        name6: 'qq',
        name7: '15112222222',
        name8: '个',
        id: '4'
      }
    ]
  }
};

const questions6: any = reactive(homeService.getQuestions6());

//表单
const dynamicForm1 = ref();

//删除
const deteleItem = (index) => {
  dataSource.splice(index, 1);
};

//新增
const addItem = () => {
  dataSource.push({
    name1: '',
    name2: '',
    name3: '',
    name4: '',
    name5: '',
    name6: ''
  });
};

//提交
const submit = () => {};

//监听动态表单数据完成
const subWatch = () => {
  $subscribeSub = proxy.$NotificationFormSub
    .getParams()
    .pipe(filter((res: any) => res !== 0))
    .subscribe((item: any) => {
      try {
        if (item.key === SELECTSERVE) {
          //数据都全部都到了
          formStore.questions.forEach((question) => {
            if (question.key === 'select1') {
              question.value = 1;
            } else if (question.key === 'slot') {
              question.value = '444';
            }
          });
        } else if (item.key === TIMESERVE) {
          console.log('看下选择的时间', item.value);
        } else if (item.key === CUSTOMSELECTSERVE) {
          console.log('选中的值', item.value);
        }
      } catch (error) {}
    });
};

onMounted(() => {
  subWatch();
});

//解绑
onUnmounted(() => {
  // document.removeEventListener("keyup", enterFn);
  if ($subscribeSub != undefined) {
    $subscribeSub.unsubscribe();
  }
  proxy.$NotificationFormSub.clearParams();
  // store.dispatch(`info/${types.REMOVEINFO}`);
  formStore.clearFormInfo();
});

//插槽字段

//wrod预览
</script>

<style lang="less" scoped>
:deep(.table5) {
  .ant-table-tbody > tr > td {
    border: none;
  }
}
.local_input_number {
  width: 120px;
}

.table_slot {
  padding-left: 12px;
}

.sdw_bg {
  background: #f00;
  height: 100%;
}

.group_wrap {
  padding: 0px 24px;
  overflow-y: auto;
  height: 100%;

  h4 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
  }

  .dynamic_table_wrapper {
    padding-bottom: 0px;
  }

  .group_conditions {
    span {
      color: #005aea;
    }
  }

  .group_add {
    border: 1px dashed #ddd;
    line-height: 36px;
    text-align: center;
    margin: 10px 0px;
    color: #ddd;
    cursor: pointer;
    margin-bottom: 50px;

    &:hover {
      color: #005aea;
      border-color: #005aea;
    }
  }

  .group_btns {
    text-align: right;

    .ant-btn {
      color: #fff;
    }
  }
}
</style>
